<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>取件人信息</title>
    <link rel="stylesheet" href="<?php echo IMG_PATH ?>bdkd/css/reset.css">
    <!--    <link rel="stylesheet" href="--><?php //echo IMG_PATH ?><!--bdkd/css/dizhi_jittttt.css">-->
    <!-- <meta name="description" content=""> -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- <link href="apple-touch-icon.png" rel="apple-touch-icon"> -->

    <!-- <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script> -->
    <script src="<?php echo IMG_PATH ?>bdkd/js/dizhi_ji_flexible.js"></script>
    <!-- <link href="apple-touch-icon.png" rel="apple-touch-icon"> -->
    <link href="https://cdn.bootcss.com/framework7/1.6.5/css/framework7.ios.min.css" rel="stylesheet">
    <!-- <link href="https://cdn.bootcss.com/framework7/1.6.5/css/framework7.ios.colors.min.css" rel="stylesheet"> -->
    <link href="<?php echo IMG_PATH ?>bdkd/css/dizhi_ji_style.css" rel="stylesheet">
    <style>
    input{
            background: #fff;
             border: none;
            outline: none;
        }
        body {
            position: relative;
            background: #f2f2f2;
            height: 100%; }
        body header {
            width: 100%;
            background: #fff; }
        body header ul {
            width: 100%; }
        body header ul li {
            display: flex;
            border-bottom: 1px solid #e3e3e3; }
        body header ul li input {
            display: block;
            padding: 0.4rem;
            width: 100%;
            border: none;
            font-size: 12px;
            color: #999;
            outline: none; }
        [data-dpr="2"] body header ul li input {
            font-size: 24px; }
        [data-dpr="3"] body header ul li input {
            font-size: 36px; }
        body header ul li:nth-child(4) {
            border: none;
            height: 2.2666666667rem; }
        body header ul li:nth-child(4) textarea {
            padding: 0.4rem;
            border: none;
            width: 100%;
            font-size: 12px;
            color: #999;
            outline: none;
            resize: none; }
        [data-dpr="2"] body header ul li:nth-child(4) textarea {
            font-size: 24px; }
        [data-dpr="3"] body header ul li:nth-child(4) textarea {
            font-size: 36px; }
        body header ul li:nth-child(3) {
            height: 1.1733333333rem;
            padding: 0.4rem;
            border: none; }
        body section {
            width: 100%;
            padding: 1.3066666667rem 0px 1.7066666667rem 0px;
            background: #f2f2f2; }
        body section .btn {
            display: block;
            width: 7.68rem;
            height: 1.2rem;
            background: #14a5fb;
            border: none;
            border-radius: 0.6rem;
            outline: none;
            margin: 0px auto;
            font-size: 14px;
            color: #fff;
            text-align: center;
            line-height: 1.2rem;
            /*box-shadow: 0px 8px 20px 0px rgba(20, 164, 251, 0.44);*/ }
        [data-dpr="2"] body section .btn {
            font-size: 28px; }
        [data-dpr="3"] body section .btn {
            font-size: 42px; }
        body section .btn1 {
            display: block;
            width: 7.68rem;
            height: 1.2rem;
            background: #14a5fb;
            border: none;
            border-radius: 0.6rem;
            outline: none;
            display: none;
            margin: 0px auto;
            font-size: 14px;
            color: #fff;
            text-align: center;
            line-height: 1.2rem;
           /* box-shadow: 0px 8px 20px 0px rgba(20, 164, 251, 0.44);*/ }
        [data-dpr="2"] body section .btn1 {
            font-size: 28px; }
        [data-dpr="3"] body section .btn1 {
            font-size: 42px; }
        body section .btn2 {
            display: block;
            width: 7.68rem;
            height: 1.2rem;
            background: #14a5fb;
            border: none;
            border-radius: 0.6rem;
            outline: none;
            display: none;
            margin: 0px auto;
            font-size: 14px;
            color: #fff;
            text-align: center;
            line-height: 1.2rem;
           /* box-shadow: 0px 8px 20px 0px rgba(20, 164, 251, 0.44);*/ }
        [data-dpr="2"] body section .btn2 {
            font-size: 28px; }
        [data-dpr="3"] body section .btn2 {
            font-size: 42px; }
        body footer .xuan {
            display: flex;
            width: 100%;
            background: #fff; }
        body footer .xuan .bottom-top {
            width: 100%;
            height: 1.2rem;
            margin: 0px 0.4rem;
            line-height: 1.2rem;
            background-image: url(<?php echo IMG_PATH ?>bdkd/img/xuxian.png);
            background-repeat: no-repeat;
            background-position: bottom;
            background-size: 100%; }
        body footer .xuan .bottom-top p {
            display: inline;
            font-size: 14px;
            padding-left: 0.1333333333rem;
            color: #333;
            border-left: 0.08rem solid #84bafe; }
        [data-dpr="2"] body footer .xuan .bottom-top p {
            font-size: 28px; }
        [data-dpr="3"] body footer .xuan .bottom-top p {
            font-size: 42px; }
        body footer .dizhi-jiaobu {
            background-image: url(<?php echo IMG_PATH ?>bdkd/img/beijing@2x.png);
            background-size: 5.8933333333rem 2.9866666667rem;
            background-position: center;
            background-repeat: no-repeat; }
        body footer .dizhi-jiaobu ul {
            width: 100%;
            height:3.5rem;
            /*height: 31.109445%;*/
            overflow: scroll;
            /*background:#fff;*/ }
        body footer .dizhi-jiaobu ul li {
            display: flex;
            /*height:px2em(140px);*/
            background: #fff;
            margin-bottom: 0.1333333333rem; }
        body footer .dizhi-jiaobu ul li div {
            width: 100%;
            padding: 0.4rem;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            position: relative;

            /*  p{
              width: 100%;
            } */ }
            body footer .dizhi-jiaobu ul li div img{
            width:0.32rem;
            height:0.346666667rem;
            position: absolute;
            top:0.26666667rem;
            right:0.26666667rem;
          }
        body footer .dizhi-jiaobu ul li div p:nth-child(1) {
            display: flex;
            justify-content: space-between; }
        body footer .dizhi-jiaobu ul li div p:nth-child(1) input:nth-child(1) {
            height: 0.4rem;
            border: none;
            outline: none;
            font-weight: bold;
            font-size: 14px;
            color: #333; }
        [data-dpr="2"] body footer .dizhi-jiaobu ul li div p:nth-child(1) input:nth-child(1) {
            font-size: 28px; }
        [data-dpr="3"] body footer .dizhi-jiaobu ul li div p:nth-child(1) input:nth-child(1) {
            font-size: 42px; }
        body footer .dizhi-jiaobu ul li div p:nth-child(1) input:nth-child(2) {
            width: 2.1333333333rem;
            height: 0.4rem;
            border: none;
            outline: none;
            font-size: 12px;
            color: #333; }
        [data-dpr="2"] body footer .dizhi-jiaobu ul li div p:nth-child(1) input:nth-child(2) {
            font-size: 24px; }
        [data-dpr="3"] body footer .dizhi-jiaobu ul li div p:nth-child(1) input:nth-child(2) {
            font-size: 36px; }
        body footer .dizhi-jiaobu ul li div textarea {
            border: none;
            outline: none;
            font-size: 12px;
            color: #333;
            height: 0.4rem;
            resize: none; }
        [data-dpr="2"] body footer .dizhi-jiaobu ul li div textarea {
            font-size: 24px; }
        [data-dpr="3"] body footer .dizhi-jiaobu ul li div textarea {
            font-size: 36px; }
        body .bottom {
            width: 100%;
            background: #fff;
            position: fixed;
            bottom: 0;
            display: flex; }
        body .bottom p {
            width: 100%;
            margin: 0px 0.4rem;
            height: 1.0666666667rem;
            line-height: 1.0666666667rem;
            font-size: 12px;
            color: #84bafe;
            text-align: center;
            background-image: url(<?php echo IMG_PATH ?>bdkd/img/xuxian.png);
            background-repeat: no-repeat;
            background-position: top;
            background-size: 100%; }
        [data-dpr="2"] body .bottom p {
            font-size: 24px; }
        [data-dpr="3"] body .bottom p {
            font-size: 36px; }

    </style>
</head>
<body >

<header>
    <ul>

        <li>
            <input type="text" name="uname" placeholder="您的姓名" value="" class="ipt1">
        </li>
        <li>
            <input class="shouji ipt2" type="text" placeholder="手机号码" name="phone" value="" style="border-bottom:none;">
        </li>
        <li class="phone" style="padding:0;border-bottom:1px solid #f2f2f2;border-top:none;">
            <div class="views">
                <div class="view view-main">
                    <div class="pages">
                        <div class="page" data-page="home">
                            <div class="hide-tabbar-on-scroll">
                                <div class="list-block">
                                    <ul>
                                        <li>
                                            <div class="item-content">
                                                <div class="item-inner" style="width:100%">
                                                    <div class="item-input">
                                                        <input style="width:320px;" type="text" placeholder="输入详细地址" readonly id="location" name="location" class="ipt4">
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <script src="<?php echo IMG_PATH ?>bdkd/js/jquery.min.js"></script>
            <script src="<?php echo IMG_PATH ?>bdkd/js/dizhi_ji_framework7.min.js"></script>
            <script src="<?php echo IMG_PATH ?>bdkd/js/dizhi_ji_regionsObject2.js"></script>
            <script src="<?php echo IMG_PATH ?>bdkd/js/dizhi_ji_cityPicker.js"></script>
        </li>
        <li>
            <textarea id="address" class="wenbenyu ipt3" placeholder="详细地址（如小区(学校)/楼号/单元号/门牌号)" value=""></textarea>

        </li>
    </ul>
</header>


<section>
    <a onclick="add()"><div class="btn" onclick="">确定</div></a>
</section>

<footer>
    <div class="xuan">
        <div class="bottom-top">
            <p>我的地址</p>
        </div>
    </div>

    <div class="dizhi-jiaobu">
        <!-- <img src="./img/beijing@2x.png" alt=""> -->
        <ul class="chatupian">

            <?php
            if(empty($list)){
                ?>
                <img src="<?php echo IMG_PATH ?>bdkd/img/beijing@2x.png" alt="">
                <?php
            }else{
                foreach ($list as $val){
                    ?>
                    <li>
                        <div>
                            <img class="newCha" src="<?php echo IMG_PATH ?>bdkd/img/newCha.png" alt="">
                            <p>
                                <input type="text" disabled="disabled" style="background: #fff" value="<?php echo $val['name'];?>" class="rjx-shangguan">
                                <input disabled="disabled" style="background: #fff" class="rjx-dianhua" type="text" value="<?php echo $val['phone']; ?>">
                            </p>
                            <textarea disabled="disabled" style="background: #fff" class="rjx-dizhi" rows="10"><?php echo $val['addres'];?></textarea>

                        </div>
                    </li>
                    <?php
                }
            }
            ?>

        </ul>
    </div>
    <!-- onclick="window.open('../jikkuaidi/ji.html')" -->
</footer>

<!-- <div class="bottom"><p>点击查看更多>></p></div> -->
<script src="<?php echo IMG_PATH ?>bdkd/js/jquery-1.11.1.min.js"></script>
<script src="<?php echo IMG_PATH ?>bdkd/js/dizhi_ji.js"></script>
<!-- window.open('../jikkuaidi/ji.html') -->
<script>

    // alert(state);
    $('.views').css('display','none');
    //<input style="width:320px;" class="ipt4" type="text" placeholder="输入详细地址" readonly id="location" name="location">
    var newNode = $("<input style='width:320px;background:#fff;' class='ipt4 teshu' type='text' value='河北省廊坊市三河市燕郊镇' disabled='disabled' id='res' name='location'>");
    $('.phone').append(newNode);

    $('input').focus(function(){
        $(this).val('').css('color','#333');
    });
    /*手机*/

    $('.shouji').focus(function(){
        $('.shouji').css('color',"#333").val('');
    });
    $('.wenbenyu').focus(function(){
        $(this).val('').css('color','#333');
    })
    $('.shouji').blur(function(){

        var zh=$(this).val();
        var reg=/^1[34578]\d{9}$/;
        var res=reg.test(zh);

        if(!res){
            alert('手机格式有误');
        }
        if(zh===''){
            $('.shouji').val('手机号码')
        }

    });

    $('#location').click(function(){
        // $('#location').css('overflow','hidden');
        $('.chatupian').empty();
    })
    window.onload=function(){
        var rjx = $('.chatupian').children().length;
        if(rjx==0){
            $('.dizhi-jiaobu').css('background-image','<?php echo IMG_PATH ?>bdkd/img/beijing@2x.png');
        }else{
            $('.dizhi-jiaobu').css('background-image','none');
        }
    }

    var oIpt1=document.querySelector(".ipt1");

    var oIpt2=document.querySelector(".ipt2");

    var oIpt3=document.querySelector(".ipt3");

    var oIpt4=document.querySelector(".ipt4");




    //从上边的确定点进去是4  下边选地址是3
    function add(){
        var fdizhi = '河北省廊坊市三河市燕郊镇'+oIpt3.value;
        var name=$.trim($(" input[ name='uname' ] ").val());
        if(name==0){
            alert("请填写姓名");
            return false;
        }

        var phone=$.trim($(" input[ name='phone' ] ").val());
        if(phone==0){
            alert('请填写手机号');
            return false;
        }

        var location=$.trim($("#res").val());
        if(location==0){
            alert('请选择住址!');
            return false;
        }
        var address=$.trim($("#address").val());

        if(address==0){
            alert('请填写详细地址1');
            return false;
        }

        $.ajax({
            url:"<?php echo SITE_PATH ?>work/bexpress/addres",
            type:"post",
            data:{
                'uname': name,
                'phone': phone,
                'location': location,
                'address': address,
                'type':1//快递专区填写的地址  0用户自己实名认证的地址
            },
            success: function(data){
                console.log(data);
                if(data.result==1){

                    var g=localStorage;
                    g.setItem('fname',oIpt1.value);
                    g.setItem('fdianhua',oIpt2.value);
                    g.setItem('fdizhi',fdizhi);

                    window.location.href = '<?php echo SITE_PATH ?>work/bexpress/qu';
                }else {
                    alert(data.msg);
                }
            },
            error: function(){
                alert('提交失败0!');
            }
//                async:"false";
        })
    }

    $('.chatupian li').each(function(index,item) {
//        console.log(item);
        $(item).attr('index', index).click(function () {
            console.log(index);
            var g=localStorage;
            g.setItem('fname',$(this).find('.rjx-shangguan').val());
            g.setItem('fdianhua',$(this).find('.rjx-dianhua').val());
            g.setItem('fdizhi',$(this).find('.rjx-dizhi').text());
            window.location.href = '<?php echo SITE_PATH ?>work/bexpress/qu';
        })
        $('.newCha').click(function(){
            $(this).parent().parent().remove();
        })
    })




</script>
</body>
</html>